<template>
  <view>
    <!--200px == 100px-->
    <view style="width: 70%;margin: 200rpx auto;">
      <view class="mr-title">用 户 登 录</view>
      <view class="mr-20">
        <uni-easyinput type="username" prefixIcon="person" v-model="form.userName" placeholder="请输入账号"></uni-easyinput>
      </view>
      <view class="mr-20">
        <uni-easyinput type="password" prefixIcon="locked" v-model="form.passWord" placeholder="请输入密码"></uni-easyinput>
      </view>
      <view class="mr-20">
        <button class="mr-login" @click="login">立即登录</button>
        <view class="mr-flex">
          <navigator url="/pages/my/register/register" class="mr-to">前往注册</navigator>
          <navigator url="/pages/my/resetPassWord/resetPassWord" class="mr-to2">忘记密码</navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          userName: 'admin',
          passWord: '123456'
        }
      }
    },
    methods: {
      login() {
        this.request({
          url: '/user/login',
          method: 'POST',
          data: this.form,
        }).then(res => {
          if (res.code === 200) {
            uni.showToast({
              icon: "success",
              title: "登录成功"
            })
            uni.setStorageSync('user', res.data)
            uni.switchTab({
              url: '/pages/my/my/my'
            })
          } else {
            uni.showToast({
              icon: "none",
              title: res.message
            })
          }
        })
      },
    },
  }
</script>

<style>
  .mr-title {
    margin-top: 200rpx;
    font-size: 60rpx;
    color: #0094c8;
    margin-bottom: 60rpx;
    text-align: center;
  }

  .mr-20 {
    margin: 20rpx 0;
  }

  .mr-login {
    background-color: #3c9cff;
    color: white;
  }

  .mr-flex {
    display: flex;
  }

  .mr-to {
    flex: 1;
    width: 130rpx;
    margin: 40rpx 0;
    color: deepskyblue;
  }

  .mr-to2 {
    width: 130rpx;
    margin: 40rpx 0;
    color: deepskyblue;
  }
</style>
